<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据查询</title>
<link href="styles/general.css" rel="stylesheet" type="text/css" /><link href="styles/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/common.js"></script>
    <script src="js/utils.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery/uploadify/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquerytablesorter/jquery.tablesorter.min.js"></script>
	<script language="javascript" type="text/javascript" src="js/DatePicker4.72/WdatePicker.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.pupkk.com/dojo/1.7.5/dojo/resources/dojo.css" />
	<link rel="stylesheet" type="text/css" href="http://ajax.pupkk.com/dojo/1.7.5/dijit/themes/tundra/tundra.css" />
	<script src="http://ajax.pupkk.com/dojo/1.7.5/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit.form.DateTextBox");
		dojo.require("dijit.form.FilteringSelect");
		function changecpid()
		{
			var cpidv = dijit.byId("cpid").get('value');
			if(cpidv!="")
			{
				$.get("dataquery_changecp.do?cpid="+cpidv, 
    	           function(data) 
    	           { 
    	            	  document.getElementById("appdiv").innerHTML=data;
    	           });
			}
		}
		function get_query_dimension(dc)
		{
			var dimension = "";
			for (var n = 0; n < dc; n++)
			{
				var id = "dimension[" + n + "]";
				if (document.getElementById(id))
				{
					if(document.getElementById(id).checked)
					{
						if (dimension.length > 0)
							dimension += ";";
						dimension += document.getElementById(id).value;
					}
				}
			}
			return dimension;
		}
		function save()
		{
			var startday = $("#startday").val(),
				endday = $("#endday").val();
			if(startday=="")
			{
				alert("选择要查询的开始日期!");
				return false;
			}
			if(endday=="")
			{
				alert("选择要查询的结束日期!");
				return false;
			}
			var dimension = get_query_dimension(4);
			document.getElementById("dimension").value=dimension;
			$("input[type=submit]").val("正在查询。。。").attr("disabled",true);
			return true;
			
		}
		
	</script>
</head>

<body>
<h1>
        <span class="action-span"></span> <span
            class="action-span1"><a href="mainframe.jsp">
                首页</a> </span><span id="search_id" class="action-span1">- Kpay数据分析查询</span>
    </h1>
    <form name="form1" id="form1" method="post" action="kpay_userQuery.do?type=query" onsubmit="return save();">
    <input type="hidden" id="dimension" name="dimension" />
    <div class="form-div"   style="margin-bottom: 5px;width: 100%;" align="center">
        <table width="90%"  cellspacing="1" cellpadding="2" > 
            <tbody>
				<tr height="30">
					<td>开始日期：</td>
					<td align="left"><input type="text" size="25" name="startday" id="startday" 
					    onFocus="WdatePicker({isShowWeek:true,dateFmt:'yyyyMMdd',skin:'whyGreen'})" 
					     value="<s:property value="startday" />"/></td>
					<td>结束日期：</td>
					<td align="left"><input type="text" size="25" name="endday" id="endday" 
					    onFocus="WdatePicker({isShowWeek:true,dateFmt:'yyyyMMdd',skin:'whyGreen'})" 
					     value="<s:property value="endday" />"/></td>
					<td>运营商：</td>
					<td>
						<select id="keepandusernum.operator" name="keepandusernum.operator" style="width:175px" >
							<option value="">--请选择--</option>
							<option <s:if test="'CMCC'.equals(keepandusernum.operator)">selected</s:if> value="CMCC">中国移动</option>
							<option <s:if test="'UNICOM'.equals(keepandusernum.operator)">selected</s:if> value="UNICOM">中国联通</option>
							<option <s:if test="'TELECOM'.equals(keepandusernum.operator)">selected</s:if> value="TELECOM">中国电信</option>
						</select>
					</td>
					<td rowspan="2"> 
					  <input id="dimension[0]" type="checkbox" value="day" checked ><label for="dimension[0]">日&nbsp;&nbsp;&nbsp;&nbsp;期</label>
					  &nbsp;<input id="dimension[3]" type="checkbox" value="operator" <s:if test="dimension.indexOf('operator')>-1">checked</s:if>><label for="dimension[3]">运营商</label>
					  <br />
					  <br />
					  <input id="dimension[1]" type="checkbox" value="channel" <s:if test="dimension.indexOf('channel')>-1">checked</s:if>><label for="dimension[1]">渠&nbsp;&nbsp;&nbsp;&nbsp;道</label>
					  &nbsp;<input id="dimension[2]" type="checkbox" value="app" <s:if test="dimension.indexOf('app')>-1">checked</s:if>><label for="dimension[2]">游&nbsp;&nbsp;&nbsp;&nbsp;戏</label>
					</td>
				</tr>
				<tr height="30">
					<td>游戏：</td>
					<td align="left"><input size="25" name="keepandusernum.appversionnumber" id="keepandusernum.appversionnumber" value="<s:property value="keepandusernum.appversionnumber" />" /></td>
					<td>渠道：</td>
					<td><input size="25" name="keepandusernum.chid" id="keepandusernum.chid" value="<s:property value="keepandusernum.chid" />" /></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td align="center" colspan="7"><input type="submit" value=" 查询 " class="button" /></td>
				</tr>
			</tbody>
		</table>
	</div>
   <!-- start ad menu list -->
   <div class="list-div" id="listDiv" style="margin-bottom: 5px;width: 100%;"  align="center">
    <s:if test="type.equals('query')">
    <table width="90%" id="myTable" cellspacing="1" cellpadding="2" align="center">
        <thead>
         <tr>
         	<s:if test="%{checkQueryDimension(dimension,'day')}">
             <th rowspan="2" height="20">日期</th>
            </s:if>
            <s:if test="%{checkQueryDimension(dimension,'operator')}">
             <th rowspan="2" height="20">运营商</th>
            </s:if>
            <s:if test="%{checkQueryDimension(dimension,'channel')}">
             <th rowspan="2" height="20">渠道(chid)</th>
            </s:if>
            <s:if test="%{checkQueryDimension(dimension,'app')}">
             <th rowspan="2" height="20">游戏(appid)</th>
            </s:if>
         	<th rowspan="2">新增用户</th>
         	<th rowspan="2">活跃用户</th>
         	<th style="text-align: center;" colspan="10">留存(留存/新增*100)</th>
         </tr>
         <tr>
         	<th>次日</th>
         	<th>2日</th>
         	<th>3日</th>
         	<th>4日</th>
         	<th>5日</th>
         	<th>6日</th>
         	<th>7日</th>
         	<th>10日</th>
         	<th>15日</th>
         	<th>30日</th>
         </tr>
         </thead>
         <s:if test="keepandusernumlist.size()>0">
          <tbody>
		 <s:iterator value="keepandusernumlist" status="i">
			<tr>
				<s:if test="%{checkQueryDimension(dimension,'day')}">
				<td style="background-color: rgb(255, 255, 255);"><s:property value="day" /></td>
				</s:if>
				<s:if test="%{checkQueryDimension(dimension,'operator')}">
				<td style="background-color: rgb(255, 255, 255);">
					<s:if test="operatorname.length()==0">未知</s:if>
					<s:else><s:property value="operatorname" /></s:else></td>
				</s:if>
				<s:if test="%{checkQueryDimension(dimension,'channel')}">
				<td style="background-color: rgb(255, 255, 255);">
				<s:if test="channelid!=-1"><s:property value="channellist[channelid].name" /></s:if>
				<s:else>未知</s:else>(<s:property value="chid" />)</td>
				</s:if>
				<s:if test="%{checkQueryDimension(dimension,'app')}">
				<td style="background-color: rgb(255, 255, 255);"><s:set var="appname" value="appversion[appversionnumber].appname" />
				<s:if test="#appname==null||#appname.length()==0">未知</s:if>
				<s:else><s:property value="#appname" /></s:else>(<s:property value="appversionnumber" />)</td>
				</s:if>
				<td style="background-color: rgb(255, 255, 255);"><s:property value="newuser" /></td>
				<td style="background-color: rgb(255, 255, 255);"><s:property value="activeuser" /></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="nextdaykeep!=0" ><s:property value="nextdaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(nextdaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="twodaykeep!=0" ><s:property value="twodaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(twodaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="threedaykeep!=0" ><s:property value="threedaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(threedaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="fourdaykeep!=0" ><s:property value="fourdaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(fourdaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="fivedaykeep!=0" ><s:property value="fivedaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(fivedaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="sixdaykeep!=0" ><s:property value="sixdaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(sixdaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="sevendaykeep!=0" ><s:property value="sevendaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(sevendaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="tendaykeep!=0" ><s:property value="tendaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(tendaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="fifteendaykeep!=0" ><s:property value="fifteendaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(fifteendaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right" ><s:if test="thirtydaykeep!=0" ><s:property value="thirtydaykeep" />&nbsp;/&nbsp;<s:property value="%{computearpu(thirtydaykeep,newuser)}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
			</tr>
			</s:iterator>
			</tbody>
			<tr>
				<td style="background-color: rgb(255, 255, 255);" colspan="<s:property value="%{getQueryDimensionCount(dimension)}"/>">总计</td>
				<td style="background-color: rgb(255, 255, 255);"><s:property value="totalmap['totalnewuser']" /></td>
				<td style="background-color: rgb(255, 255, 255);"><s:property value="totalmap['totalactiveuser']" /></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalnextdaykeep']!=0"><s:property value="totalmap['totalnextdaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalnextdaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totaltwodaykeep']!=0"><s:property value="totalmap['totaltwodaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totaltwodaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalthreedaykeep']!=0"><s:property value="totalmap['totalthreedaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalthreedaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalfourdaykeep']!=0"><s:property value="totalmap['totalfourdaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalfourdaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalfivedaykeep']!=0"><s:property value="totalmap['totalfivedaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalfivedaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalsixdaykeep']!=0"><s:property value="totalmap['totalsixdaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalsixdaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalsevendaykeep']!=0"><s:property value="totalmap['totalsevendaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalsevendaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totaltendaykeep']!=0"><s:property value="totalmap['totaltendaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totaltendaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalfifteendaykeep']!=0"><s:property value="totalmap['totalfifteendaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalfifteendaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
				<td style="background-color: rgb(255, 255, 255);text-align: right"><s:if test="totalmap['totalthirtydaykeep']!=0"><s:property value="totalmap['totalthirtydaykeep']" />&nbsp;/&nbsp;<s:property value="%{computearpu(totalmap['totalthirtydaykeep'],totalmap['totalnewuser'])}" />&nbsp;&nbsp;</s:if><s:else>--</s:else></td>
			</tr>
			</s:if>
			<s:else>
			<tr>
				<td colspan="<s:property value="%{getQueryDimensionCount(dimension)+12}"/>" align="center">无</td>
			</tr>
			</s:else>
	</table>
	</s:if>
  </div>
  </form>
 <!--Bottom开始-->
    <script language="JavaScript">

if (document.getElementById("listDiv"))
{
  document.getElementById("listDiv").onmouseover = function(e)
  {
    obj = Utils.srcElement(e);

    if (obj)
    {
      if (obj.parentNode.tagName.toLowerCase() == "tr") row = obj.parentNode;
      else if (obj.parentNode.parentNode.tagName.toLowerCase() == "tr") row = obj.parentNode.parentNode;
      else return;

      for (i = 0; i < row.cells.length; i++)
      {
        if (row.cells[i].tagName != "TH") row.cells[i].style.backgroundColor = '#eeeded';
      }
    }

  }

  document.getElementById("listDiv").onmouseout = function(e)
  {
    obj = Utils.srcElement(e);

    if (obj)
    {
      if (obj.parentNode.tagName.toLowerCase() == "tr") row = obj.parentNode;
      else if (obj.parentNode.parentNode.tagName.toLowerCase() == "tr") row = obj.parentNode.parentNode;
      else return;

      for (i = 0; i < row.cells.length; i++)
      {
          if (row.cells[i].tagName != "TH") row.cells[i].style.backgroundColor = '#FFF';
      }
    }
  }

}
$(document).ready(function() {
	   $("#myTable").tablesorter();
	});
    </script>
    
<div id="footer">
<br />
<s:property value="bottom"/></div>
    <!--Bottom结束-->
</body>
</html>